// 引入一个包
const path = require('path')
// 引入html插件
const htmlWebpackPlugin = require('html-webpack-plugin')
// 引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin')


// webpack中的所有配置信息都应该写在module.exports中
module.exports = {
   mode: 'development',
   // 指定入口文件
   entry: "./src/index.ts",
   // 指定打包文件所在目录
   output: {
      // 指定打包文件的目录
      path: path.resolve(__dirname, 'dist'),
      // 打包后的文件名
      filename: "bundle.js",
      // 告诉webpack不使用箭头函数
      // environment: {
      //    arrowFunction: false
      //    const: false
      // }
   },
   // 指定我们打包时所需要使用的模块
   module: {
      // 指定要加载的规则
      rules: [
         // 设置ts文件的处理
         {
            // 指定规则生效的文件
            test: /\.ts$/,
            // 要使用的loader
            use: 'ts-loader',
            // 要排除的文件
            exclude: /node_modules/
         },
         // 设置less文件的处理
         {
            test: /\.less$/,
            use: [
               "style-loader",
               "css-loader",
               // 引入postcss处理样式兼容性问题
               {
                  loader: "postcss-loader",
                  options: {
                     postcssOptions: {
                        plugins: [
                           [
                              "postcss-preset-env",
                              {
                                 browsers: 'last 2 versions'
                              }
                           ]
                        ]
                     }
                  }
               },
               "less-loader"
            ]
         }
      ]
   },
   // 配置webpack插件
   plugins: [
      new CleanWebpackPlugin(),
      new htmlWebpackPlugin({
         title: '这是一个自定义的title',
         template: "./src/index.html",
      }),

   ],
   // 用来设置引用模块
   resolve: {
      extensions: ['.ts', '.js']
   }
}